<template>
  <div class="form-line">
    <div class="line-h">
      <p>核对方法:</p>
      <p>列: 1=3+4+5+6=7+8+9+10+11</p>
      <p style="margin-left:20px">=12+…+15=16+…+28</p>
      <p>行: 25=1+2-12=26+……+31</p>
      <p style="margin-left:20px"> 2=3+……+11 12=13+…+24</p>
      <p>单位: 人</p>
    </div>
    <div class="line-h">
      <div class="line-h-t">
        <div class="line-h-h" style="width:calc(2 * 40px + 1px)">
          <div class="line-h-h-tst lack">
            <div class="flex-column" v-ftitle>合计</div>
          </div>
          <div class="line-h-h-tst lack">
            <div class="flex-column" v-ftitle>女</div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(4 * 40px + 3px)">
          <div class="line-h-h-t">婚姻状况</div>
          <div class="line-h-h-ts">
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>未婚</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>已婚</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>离婚</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>丧婚</div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(5 * 40px + 4px)">
          <div class="line-h-h-t">年龄</div>
          <div class="line-h-h-ts">
            <div class="line-h-h-tst">
              <div class="flex-column">
                <p>不</p><p>满</p><p>18</p><p>岁</p>
              </div>
            </div>
            <div class="line-h-h-tst">

              <div class="flex-column"><p>18</p><p>|</p><p>25</p><p>岁</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>26</p><p>|</p><p>35</p><p>岁</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>36</p><p>|</p><p>60</p><p>岁</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>61</p><p>岁</p><p>以</p><p>上</p></div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(4 * 40px + 3px)">
          <div class="line-h-h-t">文化程度</div>
          <div class="line-h-h-ts">
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>文盲</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>小学</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>中学</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>大专以上</div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(13 * 40px + 12px)">
          <div class="line-h-h-t">身份</div>
          <div class="line-h-h-ts">
            <div class="line-h-h-tst">
              <div class="flex-column"><p>国务</p><p>家&nbsp;&nbsp;&nbsp;</p><p>公员</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>企理</p><p>事&nbsp;&nbsp;&nbsp;</p><p>业人</p><p>管员</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>工人</div>
            </div>
            <div class="line-h-h-tsh" style="width:calc(5 * 40px+ 4px)">
              <div class="line-h-h-ts">农民</div>
              <div class="line-h-h-tst" style="border-left:0">
                <div class="flex-column" v-ftitle>务工</div>
              </div>
              <div class="line-h-h-tst">
                <div class="flex-column" v-ftitle>务农</div>
              </div>
              <div class="line-h-h-tst">
                <div class="flex-column" v-ftitle>经商</div>
              </div>
              <div class="line-h-h-tst">
                <div class="flex-column" v-ftitle>服务</div>
              </div>
              <div class="line-h-h-tst">
                <div class="flex-column" v-ftitle>其他</div>
              </div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>在校学员</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>个商</p><p>体业</p><p>工者</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column"><p>离人</p><p>退&nbsp;&nbsp;&nbsp;</p><p>休员</p></div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>无业人员</div>
            </div>
            <div class="line-h-h-tst">
              <div class="flex-column" v-ftitle>其他</div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(1 * 40px)">
          <div class="line-h-h-ts">
            <div class="line-h-h-tst" style="height: 120px;">
              <div class="flex-column"><p>外</p><p>籍</p><p></p><p>人</p><p>员</p></div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="width:calc(1 * 40px)">
          <div class="line-h-h-ts">
            <div class="line-h-h-tst" style="height: 120px;">
              <div class="flex-column" v-ftitle>港澳台人员</div>
            </div>
          </div>
        </div>
        <div class="line-h-h" style="height: 120px; width:calc(1 * 40px)">
          <div class="line-h-h-ts">
            <div class="line-h-h-tst" style="height: 120px;">
              <div class="flex-column"><p>外市</p><p></p><p>省人</p><p></p><p>区员</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="line-h-t">
        <span v-for="line in lineList" :key="line">{{line}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'form-header',
  computed: {
    lineList() {
      const lineList = [];
      for (let i = 1; i < 32; i++) {
        lineList.push(i);
      }
      return lineList;
    }
  }
};
</script>

<style lang="scss">
.form-line {
  border-top: 2px solid windowtext;
  border-bottom: 1px solid windowtext;
  display: flex;
  width: 100%;

  .line-h {
    flex: 1;
    mso-style-parent: style0;
    font-size: 9.0pt;
    border-left: 1px solid windowtext;
    text-align: center;

    &:first-child {
      flex: none;
      width: 250px;
      height: 140px;
      text-align: left;
      line-height: 23px;
    }

    &:last-child {
      border-right: 1px solid windowtext;
    }

    .line-t, .line-st {
      display: inline-block;
    }
  }

  .line-h-t {
    display: flex;
    border-bottom: 1px solid windowtext;

    &:last-child {
      border-bottom: 0;
    }

    span {
      width: 40px;
      mso-style-parent: style0;
      font-size: 9.0pt;
      border-left: 1px solid windowtext;
      text-align: center;
      height: 20px;

      &:first-child {
        border-left: 0;
      }
    }
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    p {
      flex: 1;
      font-size: 9.0pt;
      display: table-cell; /*按照单元格的样式显示元素*/
      vertical-align: bottom; /*底对齐*/
    }
  }

  .line-h-h {
    mso-style-parent: style0;
    border-left: 1px solid windowtext;
    text-align: center;
    height: 120px;
    font-size: 9.0pt;

    .line-h-h-t {
      border-bottom: 1px solid windowtext;
      height: 20px;
      font-size: 9.0pt;
    }

    .line-h-h-tst {
      display: inline-block;
      vertical-align: middle;
      width: 40px;
      border-left: 1px solid windowtext;
      height: 100%;
      font-size: 0;

      &.lack {
        height: 100px;
        vertical-align: bottom;
        border-top: 1px solid windowtext;
        margin-top: 20px;

        &:first-child {
          border-top: 0;
        }
      }

      p {
        font-size: 9.0pt;
      }

      &:first-child {
        border-left: 0;
      }
    }

    .line-h-h-ts {
      height: 100px;
      font-size: 0;

      .line-h-h-tst {
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        border-left: 1px solid windowtext;
        height: 100%;
        font-size: 0;

        &:first-child {
          border-left: 0;
        }
      }

      .line-h-h-tsh {
        display: inline-block;
        vertical-align: middle;
        border-left: 1px solid windowtext;
        height: 100px;

        .line-h-h-ts {
          border-bottom: 1px solid windowtext;
          height: 20px;
          font-size: 9.0pt;
        }

        .line-h-h-tst {
          display: inline-block;
          vertical-align: middle;
          width: 40px;
          border-left: 1px solid windowtext;
          height: 79px;
          font-size: 0;

          p {
            font-size: 9.0pt;
          }

          &:first-child {
            border-left: 0;
          }
        }
      }
    }

    &:first-child {
      border-left: 0;
    }
  }
}
</style>
